<template>
	<view class="category">
		<view class="left">
			<view class="category-item" v-for="(item,index) in categorys" :key="index">
				<text @click="onClick(item)">{{item.name}}</text>
			</view>
		</view>
		<view class="right">
			<view class="product" v-for="(item,index) in products" :key="index">
				<view class="product-image">
					<image class="image" :src="item.image" mode=""></image>
				</view>
				<view class="product-info">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getCategory, getCategoryProduct} from '../../api/index.js'
	export default {
		data() {
			return {
				categorys:[],
				products:[]
			}
		},
		onLoad() {
			this.getCates()
		},
		methods: {
			getCates(){
				getCategory().then(res=>{
					this.categorys = res;
					if(this.categorys[0]) {
						getCategoryProduct({cate_id:this.categorys[0].id}).then(res=>{
								this.products = res.products.data;
							})
					}
				})
			},
			onClick(item){
				getCategoryProduct({cate_id:item.id}).then(res=>{
					this.products = res.products.data;
				})
			}
		}
	}
</script>

<style lang="scss">
	.category{
		display: flex;
		.left{
			width: 205upx;
			.category-item{
				margin:10upx;
				margin-bottom: 20upx;
				border-bottom:2upx solid #ccc;
			}
		}
		.right{
			width:100%;
		}
		.product{
			.product-image{
				.image{
					width:100%;
				}
			}
			
		}
	}
	
</style>
